<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/bootstrap-4.5.0/css/bootstrap.css">
    <!-- <link rel="stylesheet" href="/static/bootstrap-treeview-1.2.0/css/bootstrap-treeview.min.css"> -->
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css"><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <title>index</title>
    <style type="text/css">
        body {
            background-color: #eccc68;
        }
    </style>
</head>

<body>

</body>
    <div class="container">
        <h1>Canvas</h1>
        <div id="tree"></div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/static/jquery-3.4.1/jquery-3.4.1.js"></script>
    <script src="/static/bootstrap-4.5.0/js/bootstrap.js"></script>
    <script src="/static/bootstrap-treeview-1.2.0/js/bootstrap-treeview.js"></script>
    <!-- <script src="/static/axios-0.19.2/axios.js"></script> -->

    <script src="/static/layer-v3.1.1/layer.js"></script>
    <script>
        function getTree() {
        // Some logic to retrieve, or generate tree structure
        let data = [
                {
                    text: 'Pathfinding',
                    href: '#Pathfinding',
                    tags: ['2'],
                    nodes: [
                        {
                            text: 'astar_01',
                            href: '/static/astar_01.html',
                        },
                        {
                            text: 'astar_02',
                            href: '/static/astar_02.html',
                        },
                    ]
                },
                {
                    text: 'maze',
                    href: '#maze',
                    tags: ['2'],
                    nodes: [
                        {
                            text: 'maze',
                            href: '/static/maze.html',
                        },
                        {
                            text: 'maze_astar_01',
                            href: '/static/maze_astar_01.html',
                        },
                    ]
                },
                {
                    text: 'CreateMaze',
                    href: '#CreateMaze',
                    tags: ['3'],
                    nodes: [
                        {
                            text: 'Dfs',
                            href: '#Dfs',
                            tags: ['2'],
                            nodes: [
                                {
                                    text: 'dfs_01',
                                    href: '/static/dfs_01.html',
                                },
                                {
                                    text: 'dfs_02',
                                    href: '/static/dfs_02.html',
                                },

                            ]
                        },
                        {
                            text: 'prim',
                            href: '#prim',
                            tags: ['2'],
                            nodes: [
                                {
                                    text: 'prim_01',
                                    href: '/static/prim_01.html',
                                },
                                {
                                    text: 'prim_02_run',
                                    href: '/static/prim_02_run.html',
                                },
                                {
                                    text: 'prim_02',
                                    href: '/static/prim_02.html',
                                },
                            ]
                        },
                        {
                            text: 'rpart',
                            href: '#rpart',
                            tags: ['2'],
                            nodes: [
                                {
                                    text: 'rpart_01',
                                    href: '/static/rpart_01.html',
                                },
                                {
                                    text: 'rpart_02',
                                    href: '/static/rpart_02.html',
                                },
                            ]
                        },
                    ]
                },
                {
                    text: 'Animation',
                    href: '#Animation',
                    tags: ['7'],
                    nodes: [
                        {
                            text: 'boids',
                            href: '/static/boids.html',
                        },
                        {
                            text: 'blockhole',
                            href: '/static/blockhole.html',
                        },
                        {
                            text: 'lifegame',
                            href: '/static/lifegame.html',
                        },
                        {
                            text: 'linkage',
                            href: '/static/linkage.html',
                        },
                        {
                            text: 'linkage_wiggle',
                            href: '/static/linkage_wiggle.html',
                        },
                        {
                            text: 'linkage_follow_turn',
                            href: '/static/linkage_follow_turn.html',
                        },
                        {
                            text: 'linkage_follow_run',
                            href: '/static/linkage_follow_run.html',
                        },
                        {
                            text: 'linkage_follow_lockroot',
                            href: '/static/linkage_follow_lockroot.html',
                        },
                        {
                            text: 'pull_push',
                            href: '/static/pull_push.html',
                        },
                        {
                            text: 'tree',
                            href: '/static/tree.html',
                        },
                    ]
                },
                {
                    text: 'raycasting',
                    href: '#raycasting',
                    tags: ['4'],
                    nodes: [
                        {
                            text: 'raycasting',
                            href: '/static/raycasting.html',
                        },
                        {
                            text: 'raycasting_run',
                            href: '/static/raycasting_run.html',
                        },
                        {
                            text: 'raycasting_render',
                            href: '/static/raycasting_render.html',
                        },
                        {
                            text: 'raycasting_01',
                            href: '/static/raycasting_01.html',
                        },
                    ]
                },
                {
                    text: 'spring',
                    href: '#spring',
                    tags: ['3'],
                    nodes: [
                        {
                            text: 'spring',
                            href: '/static/spring.html',
                        },
                        {
                            text: 'spring_cloth',
                            href: '/static/spring_cloth.html',
                        },
                        {
                            text: 'scale',
                            href: '/static/scale.html',
                        },
                    ]
                },
                {
                    text: 'before',
                    href: '#before',
                    tags: ['11'],
                    nodes: [
                        {
                            text: 'breedwar',
                            href: '/static/before/breedwar.html',
                        },
                        {
                            text: 'demo',
                            href: '/static/before/demo.html',
                        },
                        {
                            text: 'gravity',
                            href: '/static/before/gravity.html',
                        },
                        {
                            text: 'jelly',
                            href: '/static/before/jelly.html',
                        },
                        {
                            text: 'manorwar',
                            href: '/static/before/manorwar.html',
                        },
                        {
                            text: 'rotate',
                            href: '/static/before/rotate.html',
                        },
                        {
                            text: 'tmp',
                            href: '/static/before/tmp.html',
                        },
                        {
                            text: 'crash_test',
                            href: '/static/before/crash_test.html',
                        },
                        {
                            text: 'elasticity',
                            href: '/static/before/elasticity.html',
                        },
                        {
                            text: 'reflace',
                            href: '/static/before/reflace.html',
                        },
                        {
                            text: 'snake',
                            href: '/static/before/snake.html',
                        },
                    ]
                },
            ];
            return data;
        }
        let opt = {
            data: getTree(),          // data is not optional
            levels: 1,
            backColor:  '#ccfcccdd',
            enableLinks: true,
            showTags: true,
        }
        $('#tree').treeview(opt);
        // bootstrap-treeview中文API 以及后台JSON数据处理
        // https://www.cnblogs.com/tangzeqi/p/8021637.html
    </script>
</html>
